<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>基金信息</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="/static/css/weui.min.css">
<link rel="stylesheet" href="/static/css/jquery-weui.min.css">
<style type="text/css">
body {
	font-size: 14px;
}

.active {
	background-color: #ecc;
}
</style>
</head>
<body>
<div id="container" style="display: none; padding: 1em;">
	<div class="weui-cells__title active">请输入基金代码</div>
	<div class="weui-cells weui-cells_form">
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">基金代码</label>
			</div>
			<div class="weui-cell__bd">
				<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入基金代码" @change="addFundCode()" v-model="fundcode" />
			</div>
		</div>
	</div>
	<div class="weui-cells__title active">基金关注列表 - 共有${ fundlist.length }个基金</div>
	<div class="weui-cells">
		<template v-for="(item, idx) in fundlist">
			<div class="weui-cell weui-cell_access" @click="fundselect == item.code ? fundselect = '' : fundselect = item.code" :class="{ active: fundselect == item.code }">
				<div class="weui-cell__bd">
					<p>${ item.code } - ${ item.name }</p>
				</div>
				<div class="weui-cell__ft">
					<p :style="{color: (0 == item.gszzl.indexOf('-') ? 'green' : 'red')}">当前估值：${ item.gszzl } (${ item.gztime })</p>
				</div>
			</div>
			<div class="weui-form-preview" v-show="fundselect == item.code" style="background-color: #eee;">
				<div class="weui-form-preview__bd">
					<div class="weui-form-preview__item" style="border: 2px dashed #fff;">
						<label class="weui-form-preview__label">当前净值</label>
						<span class="weui-form-preview__value">${ item.dwjz }(${ item.jzrq })</span>
					</div>
					<div class="weui-form-preview__item" style="border: 2px dashed #fff;">
						<label class="weui-form-preview__label">估算净值</label>
						<span class="weui-form-preview__value" :style="{color: (0 == item.gszzl.indexOf('-') ? 'green' : 'red')}">${ item.gsz }(${ item.gztime })</span>
					</div>
					<div class="weui-form-preview__item" style="border: 2px dashed #fff;">
						<label class="weui-form-preview__label">实时曲线</label>
						<span class="weui-form-preview__value"><img :src="item.imgsrc" style="width: 400px;" /></span>
					</div>
					<div class="weui-form-preview__item" style="border: 2px dashed #fff;">
						<label class="weui-form-preview__label">历史曲线</label>
						<span class="weui-form-preview__value"><img :src="item.imgsrc_h" style="width: 400px;" /></span>
					</div>
					<div class="weui-form-preview__item" style="border: 2px dashed #fff;">
						<label class="weui-form-preview__label">操作</label>
						<span class="weui-form-preview__value"><button @click="delFundCode(item.code);">删除</button></span>
					</div>
				</div>
				<div class="weui-form-preview__ft"></div>
			</div>
		</template>
	</div>
</div>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script src="/static/js/jquery-weui.min.js"></script>
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/axios.min.js"></script>
<script>
var vue = null;

function jsonpgz(data) {
	//
	if (vue) {
		//
		vue.updateFundCode(data.fundcode, data);
	}
}

$(document).ready(function() {
	//
	vue = new Vue({
		el: '#container',
		delimiters : [ '${' , '}' ],
		data () {
			return {
				fundcode: '',

				fundlist: [],

				fundselect: '',
			}
		},
		methods: {
			//
			autoReload() {
				//
				for (var i = 0; this.fundlist.length > i; i++) {
					//
					this.updateFundCode(this.fundlist[i].code)
				}
			},
			//
			updateList() {
				//
				var list = new Array();
				//
				for (var i = 0; this.fundlist.length > i; i++) {
					//
					list.push(this.fundlist[i].code);
				}
				//
				window.localStorage.setItem("fund.list", JSON.stringify(list));
			},
			//
			updateFundCode(fundcode, data) {
				//
				if (data) {
					//
					for (var i = 0; this.fundlist.length > i; i++) {
						//
						if (this.fundlist[i].code == data.fundcode) {
							//
							this.fundlist[i].name = data.name;
							this.fundlist[i].jzrq = data.jzrq;
							this.fundlist[i].dwjz = data.dwjz;
							this.fundlist[i].gsz = data.gsz;
							this.fundlist[i].gszzl = data.gszzl + '%';
							this.fundlist[i].gztime = data.gztime;
							this.fundlist[i].imgsrc = 'https://j4.dfcfw.com/charts/pic9/' + data.fundcode + '.png?v=' + new Date().getTime();
							this.fundlist[i].imgsrc_h = 'http://j3.dfcfw.com/images/JJJZ1/' + data.fundcode + '.png?v=' + new Date().getTime();
						}
					}
				} else {
					//
					var funname = "callback_" + fundcode + "_" + new Date().getTime();
					//
					$.ajax({
						url: 'https://fundgz.1234567.com.cn/js/' + fundcode + '.js',
						type: "GET",
						dataType: "jsonp",
						jsonpCallback: funname,
						success: (data) => {
							//
							eval(funname + '()');
						},
						error: (XMLHttpRequest, textStatus, err) => {
							//
							//console.log(err);
						},
					});
				}
			},
			//
			addFundCode() {
				//
				var fundcode = this.fundcode;
				//
				this.fundcode = '';
				//
				if (fundcode) {
					//
					for (var i = 0; this.fundlist.length > i; i++) {
						//
						if (this.fundlist[i].code == fundcode) {
							//
							$.toptip('已添加此基金(' + node.code + node.name + ')', 'warning');
							//
							return;
						}
					}
					//
					this.fundlist.push({
						code: fundcode,
						name: '加载中',
						jzrq: '加载中',
						dwjz: '加载中',
						gsz: '加载中',
						gszzl: '加载中',
						gztime: '加载中',
					});
					//
					this.updateList();
					//
					this.updateFundCode(fundcode);
				}
			},
			//
			delFundCode(fundcode) {
				//
				for (var i = 0; this.fundlist.length > i; i++) {
					//
					if (this.fundlist[i].code == fundcode) {
						//
						this.fundlist.splice(i);
						//
						this.updateList();
						//
						return;
					}
				}
			},
		},
		mounted () {
			//
			var list = window.localStorage.getItem("fund.list");
			//
			try {
				//
				var result = JSON.parse(list);
				//
				for (item of result) {
					//
					this.fundlist.push({
						code: item,
						name: '加载中',
						jzrq: '加载中',
						dwjz: '加载中',
						gsz: '加载中',
						gszzl: '加载中',
						gztime: '加载中',

						lastjz: '加载中',
					});
				}
			} catch (e) {
			}
			//
			$('#container').css("display", "");
			//
			this.autoReload();
			//
			setInterval(() => {
				//
				this.autoReload();
			}, 10000);
		},
		destroyed () {
		}
	});
});
</script>
</body>
</html>
